<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>已办事宜</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <style>
        @media screen and (max-width:900px){
            .layui-col-sm6{width: 100% !important}
        }
        @media screen and (min-width: 900px){
            .layui-col-sm6{width: 50% !important}
        }
        @media screen and (min-width: 1100px){
            .layui-col-md4 {width: 33.33333333%!important;}
        }
    </style>
</head>
<body class="listBody">
<div class="qbdms-list">
    <div class="layui-table-view-body" style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont data-iconcommon_refresh zTree-refresh" title="刷新"></a></li>
                <li><a class="layui-icon layui-icon-triangle-d zTree-triangle-d" title="展开"></a></li>
                <li><a class="layui-icon layui-icon-triangle-r zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent">
        <table id="alreadyMatter" lay-filter="alreadyMatter" ></table>
    </div>
</div>
</div>
<!--表格序列号-->
<script type="text/html" id="serialNum">
    {{d.LAY_TABLE_INDEX + 1}}
</script>
<script type="text/html" id="headerToolsBar">
    <div class="ccpui-enterSel">
    <form class="layui-form" action="" lay-filter="alreadyMatterQueryForm">
        <div class="layui-form-body selch" style="margin-top: 0">
            <div class="table-top-filter layui-row">
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">请求标题</label>
                <div class="layui-input-block">
                <input type="text" name="Q_subject_SL" id="subject" class="layui-input filter-value" placeholder="请求标题"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">流程名称</label>
                <div class="layui-input-block">
                <input type="text" name="Q_processName_SL" id="processName" class="layui-input filter-value"
                       placeholder="流程名称"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">创建人</label>
                <div class="layui-input-block">
                <input type="text" name="Q_creator_SL" id="creator" class="layui-input filter-value" placeholder="创建人"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                <select name="status" id="status" class="layui-input filter-value">
                    <option value="">所有</option>
                    <option value="1">正在运行</option>
                    <option value="5">已撤销</option>
                    <option value="6">已驳回</option>
                    <option value="7">已追回</option>
                </select>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">创建开始时间</label>
                <div class="layui-input-block">
                <input type="text" name="Q_createTime_DL" id="createTime" class="layui-input filter-value"
                       placeholder="开始时间"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">创建结束时间</label>
                <div class="layui-input-block">
                <input type="text" name="Q_endCreateTime_DG" id="endCreateTime" class="layui-input filter-value"
                       placeholder="结束时间"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">工单号</label>
                <div class="layui-input-block">
                <input type="text" name="Q_globalFlowNo_SL" id="globalFlowNo" class="layui-input filter-value"
                       placeholder="工单号"/>
                </div>
            </div>
        </div>
            <div class="selchBtn">
                <a class="layui-btn layui-btn-sm fillBtn" lay-event="query">
                    <span>查询</span>
                </a>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="reset" style="width: 28px;font-size: 12px;padding: 0">
                        <i class="iconfont data-iconcommon_refresh"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm screenParent" lay-event="screen" style="width: 28px;font-size: 12px;padding: 0">
                        <i class="iconfont data-iconcommon_downarrow screen"></i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    </div>
</script>

<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>
<script>
    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table', 'layer', 'form', 'util', 'publicMethods', 'setter', 'common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var setter = layui.setter;
        var publicMethods = layui.publicMethods;
        var common = layui.common;

        var tableH = publicMethods.tabHeight();

        catZtree();
        loadTable(serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/alreadyMatter');
        window.onresize = function(){
            if(screen.height*1<=768){
                $(".layui-table-main").css("height",$(".layui-table-main").outerHeight()+50+'px')
            }
        }
        function catZtree() {
            $.ajax({
                url: serverPath.qbdmsPath + setter.workflowLinkPath+"processRun/getAlreadyMatterAndCompletedMattersType?category=" + 'alreadyMatter',
                type: "post",
                dataType: 'json',
                async: false,
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                },
            });
        }
        //点击左树事件
        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/alreadyMatter?typeId=' + selectTypeId + '&nodePath=' + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/alreadyMatter';
            }
            loadTable(url);
            publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });

        //第一个实例

        function loadTable(url) {
            if(screen.height*1<=768){
                tableH='full-60';
            }
            table.render({
                elem: '#alreadyMatter'
                , cellMinWidth: 80
                , title: '已办事宜'
                , height: tableH
                , url: url
                ,defaultToolbar: ['']
                , method: 'post'
                , toolbar: '#headerToolsBar'
                ,autoSort: false
                , page: true
                , cols: [[
                    {field: 'runId', title: '序号', align: 'center', width: 80, fixed:'left',templet: '#serialNum'}
                    , {field: 'globalFlowNo', title: '工单号',minWidth: 110}
                    , {
                        field: 'subject',
                        title: '请求标题',
                        minWidth: 330,
                        align: 'center',
                        event: 'detail',
                        style: "cursor:pointer;color:#1E9FFF;text-decoration:underline",
                    }

                    , {
                        field: 'processName', title: '流程名称',minWidth: 120
                    }
                    , {
                        field: 'creator',
                        title: '创建人',
                        style: "cursor:pointer;color:#1E9FFF;text-decoration:underline",
                        event: 'userInfo',
                        minWidth: 110
                    }
                    , {
                        field: 'createtime', title: '创建时间',minWidth: 200,  templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {
                        field: 'duration', title: '持续时间',minWidth: 120, templet: function (d) {
                            var date1 = new Date(d.createTime);  //开始时间
                            if (d.endTime === undefined || d.endTime === null) {
                                var date2 = new Date();    //结束时间
                            } else {
                                var date2 = new Date(d.endTime);
                            }
                            var date3 = date2.getTime() - date1.getTime();   //时间差的毫秒数
                            var subMinutes = Math.floor(date3 / (60 * 1000)); //获取总共的分钟差
                            //计算出相差天数
                            var days = Math.floor(date3 / (24 * 3600 * 1000));
                            //计算出小时数
                            var leave1 = date3 % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
                            var hours = Math.floor(leave1 / (3600 * 1000));
                            //计算相差分钟数
                            var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
                            var minutes = Math.floor(leave2 / (60 * 1000));
                            //计算相差秒数
                            var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
                            var seconds = Math.round(leave3 / 1000);
                            return days + "天" + hours + "时" + minutes + "分";
                        }
                    }
                    , {
                        field: 'status',
                        title: '状态',
                        minWidth: 110,
                        templet: function (d) {
                            if (d.status == 1) {
                                return "<i class='qbdms-statusColor' style='background:rgba(38,130,255,1);'></i>正在运行";
                            } else if (d.status == 5) {
                                return "<i class='qbdms-statusColor' style='background-color:#67C23A'></i>已撤销";
                            } else if (d.status == 6) {
                                return "<i class='qbdms-statusColor' style='background:#F04134;'></i>已驳回";
                            } else if (d.status == 7) {
                                return "<i class='qbdms-statusColor' style='background-color:#67C23A'></i>已追回";
                            }
                        }
                    }
                ]]
                ,done:function () {
                    // $("div.layui-table-box").height($("div.layui-border-box").height()-$("div.layui-table-tool").height()-$("div.layui-table-page").height()-20);
                    publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
                    common.tableSelectCon('.ccpui-enterSel .layui-form input','a[lay-event=query]','.ccpui-enterSel')
                }
            });
        }
        common.initScreenTop('alreadyMatter',true,false,{number:3,width:460});
        table.on('toolbar(alreadyMatter)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("alreadyMatter", "alreadyMatterQueryForm", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("alreadyMatter", "alreadyMatterQueryForm", {where: {}}, true);
                    break;
                case "screen":
                    common.initScreenTop('alreadyMatter',false,false,{number:3,width:460});
                    break;
            }
        });
        table.on('tool(alreadyMatter)', function (obj) {
            var data = obj.data;
            var runId = data.runId;
            var isNeedReload=true;
            switch (obj.event) {
                case 'detail':
                    var height=publicMethods.layHeight('.listBody');
                    layer.open({
                        type: 2,
                        skin:'qbdms-layerFormBtn',
                        title: "流程明细",
                        shade: 0.3,
                        left: 200,
                        area: ['90%', height],
                        content: serverPath.qbdmsPath  + '/workflow/processRun/view/info?runId=' + runId
                            + '&prePage=' + "myFinishedTask",
                        cancel: function () {
                            isNeedReload = false;
                        },
                        end: function(index){
                            if (isNeedReload) {
                                table.reload('alreadyMatter', {
                                    page: {
                                        curr: 1
                                    }
                                });
                                parent.layer.close(index);
                                return false;
                            }
                        }
                    });
                    break;
                case 'userInfo':
                    var height=publicMethods.layHeight('.listBody');
                    layer.open({
                        type: 2,
                        skin:'qbdms-layerFormBtn',
                        area: ['90%', height],
                        title: ['查看用户信息'],
                        content:'${ctx}/extend/sysUser/view/view?userId=' + data.creatorId
                    });
                    break;
            }
        });


        publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        window.Initialization = function () {
            publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        };
    });

</script>
</body>
</html>
